<template>
  <div class="touchHeader">
    <div class="touchHeader_line">
      <a href="" class="touchHeader_link">
        <div class="touchHeader_img">
          <img src="../../assets/images/hotel.png" alt="" />
        </div>
        <span>酒店</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_img">
          <img src="../../assets/images/flight.png" alt="" />
        </div>
        <span>机票</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_img">
          <img src="../../assets/images/train.png" alt="" />
        </div>
        <span>火车票</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_img">
          <img src="../../assets/images/package.png" alt="" />
        </div>
        <span>度假</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_img">
          <img src="../../assets/images/piao.png" alt="" />
        </div>
        <span>景点门票</span>
      </a>
    </div>
    <div class="touchHeader_line">
      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/1.png" alt="" />
        </div>
        <span>海外酒店</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/2.png" alt="" />
        </div>
        <span>低价机票</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/3.png" alt="" />
        </div>
        <span>汽车票船票</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/4.png" alt="" />
        </div>
        <span>自由行</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/5.png" alt="" />
        </div>
        <span>攻略</span>
      </a>
    </div>
    <div class="touchHeader_line">
      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/6.png" alt="" />
        </div>
        <span>民宿客栈</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/7.png" alt="" />
        </div>
        <span>专车自驾</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/8.png" alt="" />
        </div>
        <span>赚钱.信用卡</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/9.png" alt="" />
        </div>
        <span>旅游团购</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/10.png" alt="" />
        </div>
        <span>一日游</span>
      </a>
    </div>
    <div class="touchHeader_line">
      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/11.png" alt="" />
        </div>
        <span>特惠酒店</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/12.png" alt="" />
        </div>
        <span>借钱</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/13.png" alt="" />
        </div>
        <span>白金卡</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/14.png" alt="" />
        </div>
        <span>行程设计</span>
      </a>

      <a href="" class="touchHeader_link">
        <div class="touchHeader_icon">
          <img src="../../assets/icons/15.png" alt="" />
        </div>
        <span>周末游</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>
<style scoped>
.touchHeader_line {
  display: flex;
}
.touchHeader_link {
  width: 20%;
  text-align: center;
  text-decoration: none;
  margin: .2987rem 0;
}
.touchHeader_img {
  width: 70%;
  /* height: 0; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.touchHeader_img img {
  width: 100%;
}
.touchHeader_link span {
  font-size: .5547rem;
  color: #333;
}
.touchHeader_icon {
  width: 40%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.touchHeader_icon img {
  width: 100%;
}
</style>
